const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');
const importAssetsFromCdn = require('import-assets-from-cdn')
const  cdn = {
  css:[
    'https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css'
  ],
  js:[
    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.4.3/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    'https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js',
    'https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js'
  ]
}
module.exports = {
  entry: {
    app: ['babel-polyfill','./src/index.js'],
  },
  output: {
    filename: 'js/[name].[contenthash].js',
    chunkFilename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, 'distribution')
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'src')
    }
  },

  module: {
    rules: [
      // {
      //   test: /\.(vue|js)$/,
      //   loader: 'eslint-loader', // eslint-loader的作用是，开发时如果有错，及时报错提醒
      //   exclude: /node_module/,
      //   enforce: 'pre' // 在处理vue之前，先用eslint-loader处理一般
      // },
      
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: [path.resolve(__dirname, 'node_modules')]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'file/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'font/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    // vuex: 'Vuex',
    axios: 'axios',
    'element-ui':'ELEMENT',
    mockjs: 'Mock'
    // 'lodash-es': '_',
    // lodash: '_',
    // moment: 'moment',
    // 'dingtalk-jsapi': 'dd'
  },
  plugins: [
    // new CleanWebpackPlugin(['distribution']),
    new VueLoaderPlugin(),
    // new importAssetsFromCdn(cdn),
    new HtmlWebPackPlugin({
      template: './src/app.html',
      filename: 'index.html',
      cdn: cdn
      // templateParameters: function () { /* omitted long function */ },
    })
    // new CopyWebpackPlugin([
    //   {
    //     from: path.resolve(__dirname, 'static'),
    //     to: path.resolve(__dirname, 'distribution')
    //   }
    // ])
  ]

};

// https://github.com/davenkin/webpack-learning/
// https://cdn.jsdelivr.net/gh/davenkin/webpack-learning@master/README.MD
// https://blog.csdn.net/CQG1988/article/details/101652805?
// https://blog.csdn.net/qq_36910987/article/details/89562291

// https://volantis.js.org



// https://cdn.jsdelivr.net/gh/Molunerfinn/PicGo@v2.3.0-beta.3/tag/PicGo-Setup-2.3.0-beta.3.exe

